<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="Adobe RoboHelp - www.adobe.com">
<title>Providing Flash-based analysis and interactivity: Widgets</title>
<link rel="stylesheet" href="userhelp_ns.css"><script type="text/javascript" language="JavaScript" title="WebHelpSplitCss">
<!--
if (navigator.appName !="Netscape")
{   document.write("<link rel='stylesheet' href='userhelp.css'>");}
//-->
</script>
<style type="text/css">
<!--
ul.whs1 { list-style:disc; }
p.whs2 { margin-left:24px; }
img_whs3 { border:none; width:129px; height:26px; float:none; border-style:none; }
p.whs4 { margin-left:40px; }
img_whs5 { border:none; width:588px; height:218px; float:none; border-style:none; }
img_whs6 { border:none; width:592px; height:243px; float:none; border-style:none; }
img_whs7 { border:none; width:630px; height:57px; float:none; border-style:none; }
img_whs8 { border:none; width:538px; height:345px; float:none; border-style:none; }
-->
</style><script type="text/javascript" language="JavaScript" title="WebHelpInlineScript">
<!--
function reDo() {
  if (innerWidth != origWidth || innerHeight != origHeight)
     location.reload();
}
if ((parseInt(navigator.appVersion) == 4) && (navigator.appName == "Netscape")) {
	origWidth = innerWidth;
	origHeight = innerHeight;
	onresize = reDo;
}
onerror = null; 
//-->
</script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute; left:0px; top:0px; z-index:4; visibility:hidden; }
-->
</style><script type="text/javascript" language="javascript1.2" src="whmsg.js"></script>
<script type="text/javascript" language="javascript" src="whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="whtopic.js"></script>
</head>
<body><script type="text/javascript" language="javascript1.2">
<!--
if (window.gbWhTopic)
{
	if (window.addTocInfo)
	{
	addTocInfo("Creating and modifying documents and dashboards\nProviding Flash-based analysis and interactivity: Widgets\nProviding Flash-based analysis and interactivity: Widgets");
addButton("show",BTN_TEXT,"Show","","","","",0,0,"","","");

	}
	if (window.writeBtnStyle)
		writeBtnStyle();

	if (window.writeIntopicBar)
		writeIntopicBar(1);

	if(1)
	{
	
	}

	if (window.setRelStartPage)
	{
	setRelStartPage("MicroStrategy_Web_Help.htm");

		autoSync(1);
		sendSyncInfo();
		sendAveInfoOut();
	}
}
else
	if (window.gbIE4)
		document.location.reload();

//-->
</script>
<h1>Providing Flash-based analysis and interactivity: Widgets</h1>
<p>A widget is a type of Report Services control that presents data in 
 a visual and interactive way. You can think of widgets as interactive 
 Flash-only graphs that dynamically update when an analyst selects a new 
 set of data to view. Analysts can even interact with some types of widgets 
 to manually select a set of data to analyze. You can use a variety of 
 widget types, such as Gauge, Heat Map, and Interactive Stacked Area widget. 
 Although each type of widget looks different and is used in a unique way, 
 the main purpose of widgets is the same: to provide document analysts 
 with a visual and interactive look into their data. </p>
<p>A document designer defines widgets in Editable Mode. However, the designer 
 and other users can interact with widgets in MicroStrategy Web only.</p>
<h2>Understanding and working with widgets</h2>
<p>The following list briefly summarizes each type of widget that you can 
 use in a document.</p>
<ul type="disc" class="whs1">
	
<li class=p><p>
<a href="Defining_a_Bubble_Grid_widget.htm">Bubble Grid</a>: 
 The Bubble Grid widget contains metric values that are plotted as bubbles 
 of different colors and sizes; the colors and sizes of the bubbles represent 
 the values of two distinct metrics on the Grid\Graph.</p></li>
	
<li class=p><p>
<a href="Cylinder_widget.htm">Cylinder</a>: The Cylinder 
 widget displays a vertical cylinder with fluid in it. The level of the 
 fluid within the cylinder is a visual representation of a single metric 
 value.</p></li>
	
<li class=p><p>
<a href="Defining_a_Data_Cloud_widget.htm">Data Cloud</a>: 
 The Data Cloud widget consists of a list of attribute elements. The font 
 size of each attribute element represents a metric value for that element. 
 These metric values represent the values of the first metric on the Grid/Graph.</p></li>
	
<li class=p><p>
<a href="Defining_a_Fisheye_widget.htm">Fish Eye</a>: 
 The Fish Eye Selector magnifies an item when you hover the cursor over 
 it. This style of widget is useful because it allows you to choose from 
 a large list of attribute elements, metrics, or images without having 
 to see all of the elements, metrics, or images displayed at once.</p></li>
	
<li class=p><p>
<a href="Defining_a_Funnel_widget.htm">Funnel</a>: The 
 Funnel widget can be used for a wide variety of business purposes, including 
 application management, click management, pipeline analyses for sales 
 forecasts, and sales process analysis.</p></li>
	
<li class=p><p>
<a href="Gauge_widget.htm">Gauge</a>: The Gauge widget 
 displays a needle that moves within a range of numbers displayed on its 
 outside edges. An example of a gauge is a car's speedometer. </p></li>
	
<li class=p><p>
<a href="Defining_a_Graph_Matrix_widget.htm">Graph Matrix</a>: 
 The Graph Matrix widget displays actual values. Each area graph also has 
 a line graph above it to show forecasted values. One graph is displayed 
 for every combination of elements from the attributes on the Grid\Graph's 
 rows and columns.</p></li>
	
<li class=p><p>
<a href="Heat_Map_widget.htm">Heat Map</a>: The Heat 
 Map widget combination of colored rectangles, each representing an attribute 
 element, that allow you to quickly grasp the state and impact of a large 
 number of variables at once.</p></li>
	
<li class=p><p>
<a href="Bubble_widget.htm">Interactive Bubble Graph</a>: 
 The Interactive Bubble Graph widget allows you to visualize the trends 
 of three different metrics for a set of attribute elements. </p></li>
	
<li class=p><p>
<a href="Stacked_Graph_widget.htm">Interactive Stacked 
 Graph</a>: The Interactive Stacked Graph widget is a combination of a 
 check box list and area graph. The graph allows a user to see the contribution 
 of various metric series to the change in value of a larger set of data.</p></li>
	
<li class=p><p>
<a href="Defining_a_Media_widget.htm">Media</a>: The 
 Media widget allows you to present a variety of media, such as video, 
 audio, images, or website content, on your dashboard. You can include 
 media in the widget to provide background information about data or instructions 
 on how to use the dashboard.</p></li>
	
<li class=p><p>
<a href="Defining_a_Microcharts_widget.htm">Microcharts</a>: 
 The Microcharts widget conveys information in such a way that the user 
 can, at a glance, determine the trend of a metric over time or how a metric 
 is performing compared to forecasted figures.</p></li>
	
<li class=p><p>
<a href="Defining_an_RSS_Reader_widget.htm">RSS Reader</a>: 
 The RSS Reader widget helps provide a 360-degree view of your business 
 by allowing you to compare and contrast data in your dashboard with information 
 from external news feed sources.</p></li>
	
<li class=p><p>
<a href="Thermometer_widget.htm">Thermometer</a>: The 
 Thermometer widget displays a thermometer set to a certain temperature 
 level. The temperature level within the thermometer is a visual representation 
 of a single metric value.</p></li>
	
<li class=p><p>
<a href="Time_Series_Slider.htm">Time Series Slider</a>: 
 The Time Series Slider widget allows a document analyst to choose which 
 section of the graph to view at a time. </p></li>
	
<li class=p><p>
<a href="Defining_a_Waterfall_widget.htm">Waterfall</a>: 
 The Waterfall widget consists of a group of clustered bars displayed from 
 left to right. The X-axis contains either attribute elements or metrics, 
 depending on where the attributes and metrics are placed on the Grid/Graph 
 in Design Mode or Editable Mode. The Y-axis displays a range of values 
 based on the metrics on the Grid/Graph.</p></li>
	
<li class=p><p>
<a href="Defining_a_Weighted_List_Viewer_widget.htm">Weighted 
 List Viewer</a>: The Weighted List Viewer widget provides attribute and 
 metric values with threshold colors applied to them from top to bottom. 
 The color bands on the grid reflect the range of values of the first metric 
 on the Grid/Graph. The stacked contribution bar graph on the left that 
 depicts the relative contribution or percent-to-total calculation of a 
 metric. This bar reflects the values of the second metric on the Grid/Graph.</p></li>
</ul>
<p class="whs2"><span style="font-weight: bold;"><B>Note</B></span>: 
 With the MicroStrategy SDK, you can access additional MicroStrategy widgets, 
 add third-party widgets, and create and use custom widgets. For more information 
 and instructions, see the MicroStrategy Developer Library (MSDL), part 
 of the MicroStrategy SDK product. For information on purchasing a MicroStrategy 
 SDK license, contact your Account Executive. </p>
<p>To create a widget that is correctly displayed in MicroStrategy Web, 
 you must place and position the correct number of report objects on the 
 Grid/Graph. For steps to add a widget to a document, see 
<a HREF="Insert_a_widget.htm">Inserting 
 a widget into a document</a>.</p>
<h2>Example: Adding and defining a widget </h2>
<p>When you add a Cylinder widget to a document in Editable Mode, it looks 
 similar to a standard Grid/Graph. In the object selector of the Formatting 
 toolbar <img src="images/widget_template_toolbar.gif" x-maintain-ratio="TRUE" width="129px" height="26px" border="0" class="img_whs3">, the widget is considered a type of Grid/Graph when it is selected. 
 </p>
<p>In the image below, the new Cylinder widget is shown on the right. The 
 Dataset Objects panel is displayed on the left to give you an idea of 
 the report and report objects with which the designer is working. </p>
<p class="whs4"><img src="images/widget_template_example.gif" x-maintain-ratio="TRUE" width="588px" height="218px" border="0" class="img_whs5"></p>
<p>To define the widget, report objects such as attributes and metrics 
 must be placed on the Grid/Graph. To successfully define a Cylinder widget, 
 one attribute must be placed on the Grid/Graph's rows and one metric must 
 be placed on the columns, as shown below. The Supplier attribute is placed 
 on the rows and the Units Sold metric is placed on the columns. </p>
<p class="whs4"><img src="images/widget_template_example2.gif" x-maintain-ratio="TRUE" width="592px" height="243px" border="0" class="img_whs6"></p>
<p>A selector alongside the widget is very useful. In this case, the selector 
 will be used by a document analyst to switch between different suppliers 
 (the attribute elements of the Supplier attribute). </p>
<p class="whs4"><img src="images/widget_withselector.gif" x-maintain-ratio="TRUE" width="630px" height="57px" border="0" class="img_whs7"></p>
<p>The selector is designed as follows:</p>
<ul type="disc" class="whs1">
	
<li class=p><p>The <span style="font-weight: bold;"><B>DHTML Style</B></span> 
 is the Drop-down style.</p></li>
	
<li class=p><p>The <span style="font-weight: bold;"><B>Target</B></span> is 
 the Cylinder Grid/Graph. In this case, this is Grid/Graph33, the name 
 of the widget. The target ensures that the Grid/Graph is updated accordingly 
 when an item is selected from the drop-down list. </p></li>
	
<li class=p><p>The <span style="font-weight: bold;"><B>Source</B></span> is 
 the Supplier attribute. The source provides the attribute elements from 
 the Supplier attribute to populate the selector.</p></li>
</ul>
<p>For more information about creating selectors (and connecting them to 
 Grid/Graphs or panel stacks), see 
<a HREF="Insert_a_selector.htm">Inserting 
 a selector into a document</a>. </p>
<p>The Cylinder widget only becomes a visual and interactive analysis tool 
 when it is viewed in MicroStrategy Web. In MicroStrategy Web, the Cylinder 
 widget presents a vertical cylinder with liquid in it; the level of the 
 liquid within the cylinder depicts a specific metric value. In this case, 
 the metric value is the number of units sold. Notice also that the look 
 and feel of the selector changes in MicroStrategy Web. </p>
<p>To display the number labels on the right of the cylinder, right-click 
 the cylinder and select <span style="font-weight: bold;"><B>Properties</B></span>. 
 By default, the minimum and maximum values for a Cylinder widget are 0 
 to 100. Since the metric values are much larger on this report, you should 
 change the maximum value to something like 700, to accommodate the largest 
 metric values on the report.</p>
<p><img src="images/widget_template_example3.jpeg" x-maintain-ratio="TRUE" width="538px" height="345px" border="0" class="img_whs8"></p>
<p>Another convenient addition to the widget/selector combination shown 
 above is a grid version of the report. For this example, you might add 
 the grid report shown in the Dataset Objects panel above. The grid report 
 allows you and document analysts to see how one attribute element's value 
 compares against other values. You can also sort the grid report and pivot 
 objects on it. In this example, the full grid report allows you to see 
 how one supplier's revenue compares with other suppliers. To add a grid 
 report next to the widget, simply drag the report from the Dataset Objects 
 panel and drop it next to the widget. </p>
<p>For procedural information, see 
<a HREF="Insert_a_widget.htm">Inserting 
 a widget into a document</a>.</p>
<h2>Widgets and automatic target maintenance for selectors</h2>
<p>
<a href="Selectors.htm">Selectors</a> allow a user to display different 
 metrics or different elements of attributes, custom groups, or consolidations 
 in a Grid/Graph (the target of the selector). Targets can be automatically 
 maintained in a layout. This means that when you add a Grid/Graph or widget, 
 the Grid/Graph or widget is the target of all selectors in the same panel 
 or document section as the Grid/Graph or widget. For more information 
 about automatically maintaining targets for selectors, including instructions 
 to enable and disable the functionality, see 
<a href="Automatically_maintaining_targets_for_selectors.htm">Automatically 
 maintaining targets for selectors</a>.</p>
<p>&nbsp;</p>
<script type="text/javascript" language="javascript1.2">
<!--
highlightSearch();
if (window.writeIntopicBar)
	writeIntopicBar(0);
if(0)
{

}
//-->
</script>
</body>
</html>
